<template>
	<view class="user-profile-container mt10">
		<view class="user-profile">
			<view class="user-avatar-box column-center">
				<button class="column column-center" hover-class="none" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" @click="onChooseAvatar">
					<image class="user-avatar" :src="
                            pet.avatar != ''
                                ? pet.avatar
                                : '../../static/images/default_avatar.png'
                        ">
					</image>
					<view class="muted xs">点击修改头像</view>
				</button>
			</view>
			<view class="row-info row bdb-line" @click="changeName">
				<view class="label md">宠物名称</view>
				<view class="md row" style="flex: 1">{{ pet.name }}</view>
				<u-icon name="arrow-right" />
			</view>
			<view class="row-info row bdb-line" @click="showBreed=true">
				<view class="label md">宠物品种</view>
				<view class="md row" style="flex: 1">{{ pet.breed }}</view>
				<u-icon name="arrow-right" />
			</view>
			<view class="row-info row bdb-line" @click="changeSex()">
				<view class="label md">宠物性别</view>
				<view class="md row" :class="pet.gender == 0 ? 'muted' : ''" style="flex: 1">
					{{ pet.gender == 0 ? '不知道' : pet.gender == 1 ? '男孩' : '女孩' }}
				</view>
				<u-icon name="arrow-right" />
			</view>

			<view class="row-info row bdb-line" @click="showNeuterPicker=true">
				<view class="label md">绝育状态</view>
				<view class="md row" style="flex: 1">
					{{ pet.neuter == 1 ? '已绝育' : '未绝育' }}
				</view>
				<u-icon name="arrow-right" />
			</view>
			<view class="row-info row bdb-line" @click="showWight=true">
				<view class="label md">宠物体重</view>
				<view class="md row" style="flex: 1">{{ pet.weight }}kg</view>
				<u-icon name="arrow-right" />
			</view>
			<view class="row-info row bdb-line" @click="showBirth=true">
				<view class="label md">出生日期</view>
				<view class="md row" style="flex: 1">{{ pet.birthday }}</view>
				<u-icon name="arrow-right" />
			</view>
			<view class="row-info row bdb-line" @click="showHomeDay=true">
				<view class="label md">到家日期</view>
				<view class="md row" style="flex: 1">{{ pet.home_day }}</view>
				<u-icon name="arrow-right" />
			</view>
			<!-- 	<view class="row-info row bdb-line">
				<view class="label md">一句话介绍 </view>
				<view class="md row" style="flex: 1">{{ pet.introduce }}</view>
			</view> -->
			<!-- <view class="bg-primary white save-btn row-center lg" @click="logout">退出登录</view> -->
		</view>


		<!-- 昵称修改组件 -->
		<u-popup v-model="showNickName" :closeable="true" :maskCloseAble="false" mode="center" border-radius="14">
			<view class="modify-container column-center bg-white" style="width: 70vw; padding: 24rpx">
				<view class="title xl">修改宠物名</view>
				<form @submit="changeNameConfirm">
					<u-form-item label="新昵称" :labelWidth="120">
						<input style="height: 60rpx" class="nr" :value="pet.nickname" name="nickname" placeholder="请输入新的昵称" />
					</u-form-item>
					<button class="btn bg-primary white row-center" form-type="submit">确定</button>
				</form>
			</view>
		</u-popup>

		<u-picker mode="selector" v-model="showPicker" :default-selector="[0]" :range="sexList" @confirm="onConfirm" />
		<u-picker mode="selector" v-model="showNeuterPicker" :default-selector="[0]" :range="neuterList" @confirm="onNeuterConfirm" />
		<u-calendar v-model="showBirth" mode="date" @change="changeBirth"></u-calendar>
		<u-calendar v-model="showHomeDay" mode="date" @change="changeHomeDay"></u-calendar>
		<u-select v-model="showWight" :list="weightList" @confirm="confirmWeight"></u-select>
		<u-picker mode="selector" v-model="showBreed" :range="breedList" @confirm="onBreedConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pet: {},
				showNickName: false,
				newName: '',
				sexList: ['男孩', '女孩'],
				showPicker: false,
				showNeuterPicker: false,
				neuterList: ['未绝育', '已绝育'],
				showBirth: false,
				showHomeDay: false,
				showWight: false,
				showBreed: false,
				weightList: [{ label: '0.5kg', value: '0.5' }, { label: '1kg', value: '1' }, { label: '1.5kg', value: '1.5' }, { label: '2kg', value: '2' }, { label: '2.5kg', value: '2.5'},{label: '3kg',value: '3'}],
				breedList:['安吉拉', '加菲猫', '美短', '波斯猫', '波偶猫',  '中华田园猫', '波米拉', '奶牛猫', '白猫', '四川简州猫', '狸花猫', '橘猫', '蓝猫', '金渐层', '银渐层', '串串', '黑猫']
			};
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.pet = item
		},
		methods: {
			async onChooseAvatar(e) {
				const avatarUrl = e.detail.avatarUrl;
				if (!avatarUrl) {
					return;
				}
				uni.showLoading({
					title: "正在上传中...",
					mask: true,
				});
				// 修正云路径生成逻辑
				const timestamp = new Date().getTime();
				const randomNum = Math.floor(Math.random() * 1000000);
				const cloudPath = `avatar/${timestamp}_${randomNum}.png`;
				try {
					const uploadResult = await wx.cloud.uploadFile({
						cloudPath: cloudPath,
						filePath: avatarUrl,
					});
					uni.hideLoading();
					const updateData = { avatar: uploadResult.fileID };
					this.$setPetInfo(updateData)
				} catch (err) {
					uni.hideLoading();
					this.$toast({
						title: "上传失败",
					});
				}
			},

			// 修改宠物信息
			async $setPetInfo(updateData) {
				const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'pet', data: { $url: 'update', updateId: this.pet._id, updateData: updateData } })
				if (code == 200) {
					this.$toast({
						title: msg
					})
					this.getPet()
				} else {
					this.$toast({
						title: msg
					})
				}
			},

			async getPet() {
				const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'pet', data: { $url: 'getFirst', queryData: { _id: this.pet._id } } })
				if (code == 200) {
					this.pet = data
				}
			},

			changeName() {
				this.newName = ''
				this.showNickName = true
			},
			// 修改宠物昵称
			async changeNameConfirm(e) {
				this.newName = e.detail.value.nickname
				if (!this.newName)
					return this.$toast({
						title: '请输入新的昵称'
					})
				let updateData = { name: this.newName }
				await this.$setPetInfo(updateData)
				this.showNickName = false
			},
			changeSex(e) {
				this.showPicker = true
			},
			onConfirm(value) {
				//性别 0:未设置 1：男 2：女
				let updateData = { gender: value[0] + 1 }
				this.$setPetInfo(updateData)
				this.showPicker = false
			},
			onNeuterConfirm(value) {
				let updateData = { neuter: value[0] }
				this.$setPetInfo(updateData)
				this.showNeuterPicker = false
			},
			changeBirth(e) {
				let updateData = { birthday: new Date(e.result) }
				this.$setPetInfo(updateData)
			},
			changeHomeDay(e) {
				let updateData = { home_day: new Date(e.result) }
				this.$setPetInfo(updateData)
			},
			confirmWeight(e) {
				let updateData = {weight: e[0].value}
				this.$setPetInfo(updateData)
			},
			goChooseBreed() {
				uni.navigateTo({
					url: '/pages_subpackage/chooseBreed/chooseBreed'
				})
			},
			onBreedConfirm(e) {
				let breed = this.breedList[e[0]]
				let updateData = {breed: breed}
				this.$setPetInfo(updateData)
			}
		}

	}
</script>

<style lang="scss">
	.user-profile-container {
		.user-profile {
			border-top-left-radius: 28rpx;
			border-top-right-radius: 28rpx;

			.user-avatar-box {
				padding: 30rpx;
				background-color: white;
				border-top-left-radius: 28rpx;
				border-top-right-radius: 28rpx;

				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.row-info {
				padding: 30rpx 20rpx;
				background-color: white;

				.label {
					width: 180rpx;
				}

				.bd-btn {
					padding: 8rpx 24rpx;
					border: 1px solid $-color-primary;
					color: $-color-primary;
				}
			}

			.license {
				margin-top: 80rpx;
				color: #a7a7a7;
				text-align: center;
			}

			.bdb-line {
				border-bottom: 1rpx solid #e5e5e5;
			}

			.save-btn {
				margin-top: 40rpx;
				height: 88rpx;
				margin-left: 54rpx;
				margin-right: 54rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
			}

			.updata-btn {
				margin: 0 30rpx;
				margin-top: 40rpx;
				background-color: #0cc267;
			}
		}

		.modify-container {
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 30rpx;
			width: 580rpx;
			border-radius: 30rpx;
			background-color: $-color-white;

			.title {
				padding: 26rpx 0rpx;
			}

			.modify-row {
				padding: 32rpx 0rpx;
				width: 100%;
				border-bottom: 1rpx solid #e5e5e5;

				.send-code-btn {
					border: 1px solid $-color-primary;
					width: 184rpx;
					height: 62rpx;
					color: $-color-primary;
				}
			}

			.btn {
				height: 80rpx;
				padding: 0 180rpx;
				border-radius: 20rpx;
				margin-top: 60rpx;
			}
		}
	}
</style>